<template>
  <div class="app-container">

    <!--<el-form class="login-form" auto-complete="on" label-position="left">
      <el-form-item prop="password">
        <span class="svg-container">
          <svg-icon icon-class="password" />
        </span>
        <el-input
          name="password"
          tabindex="2"
          auto-complete="on"
        />
        <span class="show-pwd">
          <svg-icon icon-class="eye-open" />
        </span>
      </el-form-item>

      <el-button type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">Login</el-button>

    </el-form>-->

    <!--<div class="navSearchBox">
      <el-input v-model="searchID" class="input-with-select searchContent" placeholder="请输入用户ID" style="width: 40%">
        <el-button slot="append" class="searchButton" icon="el-icon-search" @click="onSubmit()" />
      </el-input>
    </div>-->

    <el-card class="box-card-info" shadow="always" style="width: 100%">
      <div slot="header" class="clearfix">
        <span style=" float:left;font-weight:bold">客户信息</span>
      </div>
      <el-form ref="form" :inline="true" style="text-align: left">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="用户ID: ">
              {{ userForm.custId }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="登记姓名:">
              {{ userForm.custName }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="卡号:">
              {{ userForm.serialNum }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="手机号码:">
              {{ userForm.contactPhone }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="入网时间:">
              {{ userForm.createTime }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="入网年限:">
              {{ userForm.duration }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="是否欠费:">
              {{ userForm.custStatus }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="所属区域:">
              {{ userForm.fullAddr }}
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      userForm: {},
      searchID: '',
      userTag: {},
      tagTable: {
        userAttribute: [],
        businessAttribute: [],
        viewsBehavior: []
      }
    }
  },
  methods: {
    onSubmit() {
      this.$message('submit!')
    },
    onCancel() {
      this.$message({
        message: 'cancel!',
        type: 'warning'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .userInfo {
    padding: 20px;
    background-color: #f4f5fc;
    // background-color: #fafafa;
    height: 100%;
    // 基本信息
    .box-card-info {
      margin-top: 20px;
    }
    // 用户画像
    .echartsBox {
      margin-top: 20px;
      .userIcon {
        width: 200px;
        height: 200px;
        // border-radius: 50%;
        // background-color: #e6e6e6;
        text-align: center;
        line-height: 200px;
        // margin-top: 50px;
        margin: 100px auto;
        // margin-left: 40px;
      }
      .tagBox {
        width: 100%;
        border: 1px solid #e6e6e6;
        padding: 10px 20px;
        margin: 15px 0;
        .title {
          border-left: 5px solid #7da4ff;
          padding-left: 10px;
        }
      }
    }
  }

  .el-header,
  .el-footer {
    background-color: #b3c0d1;
    color: #333;
    text-align: left;
    line-height: 60px;
  }

  .el-aside {
    background-color: #d3dce6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }

  .el-main {
    background-color: transparent;
    color: #333;
    text-align: center;
    line-height: 160px;
    border-radius: 30px;
  }

  body > .el-container {
    margin-bottom: 40px;
  }

  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }

  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
  .text {
    font-size: 14px;
  }
  .user {
    background-color: transparent;
    text-align: center;
    line-height: 40px;
    margin-top: 5%;
    margin-bottom: 3%;
  }
  .userLabel {
    background-color: transparent;
    text-align: left;
    line-height: 80px;
    margin-bottom: 7%;
  }

  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: '';
  }
  .clearfix:after {
    clear: both;
  }

  .box-card {
    width: 480px;
  }
</style>

